<template>
  <div class="recBox" @click="toDetailsHandle(jobs.id)">
    <div class="rec-msg">
      <div class="rec-msg-1">
        <p>{{jobs.workName}}</p>
        <p>{{jobs.salary}}元/月</p>
      </div>
      <div class="rec-msg-2">
        <p>{{jobs.companyName}}</p>
        <p>{{jobs.address}}</p>
      </div>
    </div>
    <div class="avatar-msg">
      <img :src="jobs.image|setAvatar" alt="">
      <p>{{jobs.publisherWork||'公司人事部'}}</p>
      <span class="dot">|</span>
      <p>{{jobs.publisher||'刘女士'}} </p>
      <img src="../../assets/svg/love.svg" alt="">
    </div>
  </div>
</template>

<script>
export default {
name: "RecBox1",
  props:['jobs'],
  methods:{
  toDetailsHandle(id){
    this.$router.push({
      path:'recDetails',
      query:{
        id
      }
    })
    // const url=`http://localhost:8080/home?id=${id}`
    // window.open(url,'_blank')
  }
  }
}
</script>

<style lang="stylus" scoped>
--color1=rgb(102,102,102);    //职位与hr名
--color2=rgb(255,92,91);      //薪资
--color3=rgb(153,153,153);    //公司与地址
--color4=rgb(224,224,224) ;   //名字分界线

.recBox
  cursor pointer
  box-shadow 0 0 1px darkgray
  width auto
  height 140px
  display flex
  flex-direction column
  padding 0 12px
  font-size 14px
  justify-content space-between
  transition all .3s
  background white
  &:hover
    box-shadow: 0 0 6px darkcyan
.rec-msg
  height 60%
  padding 12px 0
  display flex
  flex-direction column
  justify-content space-between
.rec-msg-1,.rec-msg-2
  display flex
  justify-content space-between
.rec-msg-1
  color --color2
  & p:first-child
    color --color1
.rec-msg-2
  color --color3
.avatar-msg
  color --color1
  padding 12px 0
  height 40%
  border-top 1px dotted yellowgreen
  display flex
  align-items center
  justify-content space-between
  *
    margin-right 10px
  img
    width 30px
    height 30px
    border-radius 50%
.dot
  color --color3



</style>
